<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="the_div">
      <p>我是p标签</p>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <a id="theA" href="#" data-id="123">我是一个a标签</a>
      <ul>
        <li>北京</li>
        <li class="sky">天津</li>
        <li>南京</li>
      </ul>
      <ol class="my_li">
        <li>大张</li>
        <li>大王</li>
        <li>大狗</li>
      </ol>
      <ul class="my_li">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
      </ul>
    </div>
    <script>
      // const taba = document.querySelector('#theA')
      // console.log(taba)

      // const hhh = document.querySelectorAll('h3')
      // for (let i = 0; i < hhh.length; i++) {
      //   console.log(hhh[i])
      // }

      // const liz = document.querySelectorAll('.the_div li')
      // for (let i = 0; i < liz.length; i++) {
      //   console.log(liz[i])
      // }

      // const lis = document.querySelectorAll('ul.my_li li')
      // for (let i = 0; i < lis.length; i++) {
      //   console.log(lis[i])
      // }

      // const lia = document.querySelector('ul.my_li li:nth-child(2)')
      // console.log(lia)
      // lia.innerHTML=`小六`
      // lia.style.color='red'

      // const sky = document.querySelector('.sky')
      // sky.style. backgroundColor= 'green'
    </script>
  </body>
</html>
